<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通讯录首页</title>

    <link rel="stylesheet" href="./assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./assets/css/animate.min.css"/>
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="./assets/mescroll/mescroll.min.css">

    <link rel="stylesheet/less" href="./assets/css/reset.less"/>
    <link rel="stylesheet/less" href="./assets/css/common.less"/>
    <link rel="stylesheet/less" href="./assets/css/index.less"/>
</head>
<body>
<!-- 搜索 -->
<div class="search">
    <div class="box">
        <div class="icon">
            <span class="glyphicon glyphicon-search"></span>
        </div>

        <input class="input" id="search" placeholder="请输入名字"/>

        <button class="btn" size="mini" type="default">搜索</button>
    </div>
</div>

<!-- 分类 -->
<div class="type wow fadeInUp">
    <div class="list" id="type-list">
        <div class="item active">全部</div>

    </div>
</div>

<!-- 列表 -->
<div id="cardlist" class="contact wow fadeInUp mescroll" data-wow-delay="100ms">
    <div class="list">

    </div>
</div>

<!-- 底部 -->
<div class="tabbar">
    <div class="box">
        <a href="index.html" class="item">
            <span class="icon glyphicon glyphicon-home"></span>
            <span class="name">首页</span>
        </a>
        <a href="ContactAdd.html" class="item">
            <span class="icon glyphicon glyphicon-list-alt"></span>
            <span class="name">新建</span>
        </a>
        <a href="UserIndex.html" class="item">
            <span class="icon glyphicon glyphicon-user"></span>
            <span class="name">我的</span>
        </a>
    </div>
</div>
</body>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/mui/js/mui.min.js"></script>
<script src="./assets/mescroll/mescroll.min.js"></script>
<script src="./assets/axios/axios.min.js"></script>
<script src="./assets/axios/request.js"></script>
<script src="./assets/js/cookie.js"></script>
<script src="./assets/js/login.js"></script>

<script>
    new WOW().init()

    let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {}

    let typeId = 0
    let search = ''

    const mescroll = new MeScroll('cardlist', {
        down: {
            auto: false,
            callback: downCallback
        },
        up: {
            auto: true,
            isBounce: false,
            callback: UpCallback,
            toTop: {
                duration: 600,
                src: "./assets/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    })

    function Edit(cardId) {
        location.href = 'ContactEdit.html?cardid=' + cardId
    }

    function Del(cardId) {
        mui.confirm('确认删除该名片', async (res) => {
            if (res.index === 1) {
                let result = await POST({
                    url: 'card/card/del',
                    params: {
                        cardid: cardId,
                        businessid: business.id
                    }
                })

                if (result) {
                    if (result.code === 1) {
                        mui.toast(result.msg)
                        mescroll.resetUpScroll()
                        $('#cardlist .list').empty()
                    } else {
                        mui.toast(result.msg)
                    }
                }
            }
        })
    }

    $('.btn').click(function () {
        search = $.trim($('#search').val())
        mescroll.resetUpScroll()
        $('#cardlist .list').empty()
    })

    $('#type-list').on('click', '.item', function () {
        typeId = $(this).data('typeid')
        console.log(typeId)
        $(this).addClass('active').siblings().removeClass('active')
        mescroll.resetUpScroll()
        $('#cardlist .list').empty()
    })

    async function downCallback() {
        mescroll.resetUpScroll()
        $('#cardlist .list').empty()
    }

    async function UpCallback(page) {
        let data = {
            page: page.num,
            limit: page.size,
            typeid: typeId,
            search,
            businessid: business.id
        }

        let result = await POST({
            url: 'card/card/index',
            params: data
        })

        if (result.code === 0) {
            mui.toast(result.msg)
            mescroll.endBySize(0, 0)
            return
        }

        let listLength = result.data.list.length
        let count = result.data.count
        mescroll.endBySize(listLength, count)
        fetchList(result.data.list)

    }

    function fetchList(data) {
        let Items = '';

        for (let item of data) {
            Items += `
                <div class="item">
                    <div class="content">
                        <h3 class="title">
                            <a href="ContactAdd.html">${item.nickname}</a>
                        </h3>

                        <div class="info">
                            <div class="icon">
                                <image src="./assets/images/info.png"></image>
                            </div>
                            <div class="desc">
                                ${item.remark}
                            </div>
                        </div>
                    </div>

                    <div class="call icon" style="margin-right: 10px">
                        <image src="./assets/images/call.png" ></image>
                    </div>

                    <div class="operation" style="display: flex;column-gap: 10px;">
                        <button class="btn btn-primary" onclick="Edit(${item.id})">编辑</button>
                        <button class="btn btn-danger" onclick="Del(${item.id})">删除</button>
                    </div>
                </div>
            `
        }

        $('#cardlist .list').append(Items)
    }

    // 请求通讯录分类
    (async () => {
        let result = await POST({
            url: 'card/card/type'
        });

        if (result) {
            if (result.code === 1) {
                let Items = '';

                for (let item of result.data) {
                    Items += `<div class="item" data-typeid="${item.id}">${item.name}</div>`
                }

                $('#type-list').append(Items)
            }
        }
    })()
</script>
</html>